---
description: Компонент, который унифицирует браузерную полосу прокрутки на всех платформах.
---

<Overview group="utils">

# CustomScrollView [tag:component]

Компонент, который унифицирует браузерную полосу прокрутки на всех платформах.

</Overview>

> Обратите внимание, что используются нативные стили для изменения полосы прокрутки.
> Важно, что данная стилизация не работает для браузера `Firefox` < `64` версии,
> и в нём будет показана стандартная полоса прокрутки.

<Playground style={{ height: 150 }}>
  ```jsx
  <CustomScrollView>
    {['Say', 'Hello', 'To', 'My', 'Little', 'Friend'].map((item) => (
      <Cell key={item} before={<Avatar />}>
        {item}
      </Cell>
    ))}
  </CustomScrollView>
  ```
</Playground>

## Прокручиваемый контент

Контент, который требует полосы прокрутки, необходимо передавать в свойство `children`.

## Параметры прокрутки

### `overscrollBehavior`

Свойство `overscrollBehavior` отвечает за поведение при достижении границы области прокрутки.
Подробнее с поведением и значениями можно ознакомиться в [документации overscrollBehavior](https://developer.mozilla.org/ru/docs/Web/CSS/overscroll-behavior).

### `scrollBehavior`

Свойство `scrollBehavior` отвечает за анимацию прокрутки.
Подробнее с поведением и значениями можно ознакомиться в [документации scroll-behavior](https://developer.mozilla.org/ru/docs/Web/CSS/scroll-behavior).

### Скрытие полосы прокрутки

Свойство `scrollbarHidden` позволяет управлять видимостью полосы прокрутки.

- `true` — полоса прокрутки скрыта;
- `false` — полоса прокрутки видна (по умолчанию).

## Горизонтальная полоса прокрутки

Свойство `enableHorizontalScroll` позволяет отображать горизонтальную полосу прокрутки.

- `true` — горизонтальная полоса прокрутки видна;
- `false` — горизонтальная полоса прокрутки скрыта (по умолчанию).

<Playground>
  ```jsx
  <CustomScrollView enableHorizontalScroll>
    <Flex gap="m" noWrap>
      {Array.from({ length: 20 }).map((_, index) => (
        <Avatar key={index} size={56} />
      ))}
    </Flex>
  </CustomScrollView>
  ```
</Playground>

## Обработчики событий

Компонент позволяет обрабатывать событие `scroll`, возникающее при прокрутке контента, через свойство `onScroll`.

## Свойства и методы [#api]

<PropsTable name="CustomScrollView" />
